<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>页面不存在 | 404 Error</title>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <!-- 配置Tailwind自定义主题 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#3B82F6',
            secondary: '#64748B',
            neutral: {
              100: '#F8FAFC',
              200: '#E2E8F0',
              300: '#CBD5E1',
              400: '#94A3B8',
              500: '#64748B',
              600: '#475569',
              700: '#334155',
              800: '#1E293B',
              900: '#0F172A',
            }
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
          animation: {
            'float': 'float 3s ease-in-out infinite',
          },
          keyframes: {
            float: {
              '0%, 100%': { transform: 'translateY(0)' },
              '50%': { transform: 'translateY(-10px)' },
            }
          }
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
      .bg-pattern {
        background-image: radial-gradient(#3B82F610 1px, transparent 1px);
        background-size: 20px 20px;
      }
    }
  </style>
</head>

<body class="font-inter bg-neutral-100 min-h-screen flex flex-col items-center justify-center p-4 text-neutral-800 bg-pattern">
  <div class="w-full max-w-4xl flex flex-col md:flex-row items-center justify-center gap-12">
    <!-- 左侧插图区域 -->
    <div class="w-full md:w-1/2 flex justify-center">
      <div class="relative w-64 h-64 md:w-80 md:h-80 animate-float">
        <div class="absolute inset-0 flex items-center justify-center">
          <i class="fa fa-exclamation-triangle text-6xl md:text-8xl text-primary/80"></i>
        </div>
        <div class="absolute -bottom-4 -right-4 w-32 h-32 md:w-40 md:h-40 bg-primary/10 rounded-full blur-xl"></div>
        <div class="absolute -top-4 -left-4 w-32 h-32 md:w-40 md:h-40 bg-secondary/10 rounded-full blur-xl"></div>
      </div>
    </div>
    
    <!-- 右侧文本区域 -->
    <div class="w-full md:w-1/2 text-center md:text-left">
      <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold mb-4 text-shadow">404</h1>
      <p class="text-[clamp(1rem,3vw,1.25rem)] text-neutral-600 mb-6 max-w-lg mx-auto md:mx-0">
        抱歉，您访问的页面不存在或已被移除。请检查网址是否正确，或通过下方链接返回首页。
      </p>
      
      <div class="flex flex-col sm:flex-row gap-4 justify-center md:justify-start">
        <a href="#" class="bg-primary hover:bg-primary/90 text-white font-medium py-3 px-6 rounded-lg transition-all duration-300 transform hover:scale-105">
          返回首页
        </a>
        <a href="#" class="border border-neutral-300 hover:border-primary hover:text-primary font-medium py-3 px-6 rounded-lg transition-all duration-300">
          联系我们
        </a>
      </div>
      
      <div class="mt-10 flex flex-col gap-2 text-neutral-500 text-sm">
        <p>您可以尝试以下操作：</p>
        <ul class="list-disc list-inside space-y-1">
          <li>检查网址拼写是否正确</li>
          <li>通过导航菜单查找您需要的内容</li>
          <li>使用网站搜索功能查找资源</li>
        </ul>
      </div>
    </div>
  </div>
  
  <footer class="mt-20 text-neutral-500 text-sm">
    <p>© 2025 您的网站名称. 保留所有权利.</p>
  </footer>

  <!-- 动态粒子效果（可选） -->
  <script>
    // 简单的粒子背景效果
    document.addEventListener('DOMContentLoaded', function() {
      const container = document.querySelector('body');
      const particleCount = 20;
      
      for (let i = 0; i < particleCount; i++) {
        const particle = document.createElement('div');
        particle.className = 'absolute rounded-full opacity-20';
        particle.style.width = `${Math.random() * 10 + 5}px`;
        particle.style.height = particle.style.width;
        particle.style.backgroundColor = Math.random() > 0.5 ? '#3B82F6' : '#64748B';
        particle.style.left = `${Math.random() * 100}%`;
        particle.style.top = `${Math.random() * 100}%`;
        particle.style.animation = `float ${3 + Math.random() * 3}s ease-in-out infinite`;
        particle.style.animationDelay = `${Math.random() * 3}s`;
        container.appendChild(particle);
      }
    });
  </script>
</body>
</html>